<template>
  <div id="leftBottom">
    <div class="map" id="lbEchart" :style="{ width: '100%', height: height + 'px' }"></div>
  </div>
</template>

<script>
import { regionRank } from '@/api/ops/dashboard'
import tdTheme from '@/api/ops/echart/theme.json' // 引入默认主题
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].name + ': ' + params[0].value;
          }
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            color: '#a4a9c7'
          }
        },
        yAxis: {
          type: 'value',
          offset: 30,
          splitLine: { show: false },
          // axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: true, color: '#a4a9c7' },
        },
        color: ['#82f2fd'],
        series: [
          {
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: -10,
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              opacity: 0.8
            },
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            },
            data: [123, 60, 255, 189, 129, 99, 238, 88, 262, 99, 299, 188],
            z: 0
          },
        ]
      },
      myChart: null,
    }
  },
  props: {
    refreshNum: String,
    height: {
      type: Number,
      default: 100
    }
  },
  watch: {
    refreshNum(val, oldVal) {
      // this.regionRank();
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.myChart = this.$echarts.init(
        document.getElementById("lbEchart")
      );
      this.myChart.setOption(this.option);
    },
  }
}
</script>

<style lang="scss">
@import '~@/assets/ops/styles/style.scss';
@import '~@/assets/ops/styles/index.scss';

#leftBottom {
  padding: 0.3rem 0.2rem;
  height: 6.5rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;

  .bg-color-black {
    height: 6.0625rem;
    border-radius: 0.125rem;
  }

  .text {
    color: #c3cbde;
    font-size: 20px;
  }

  .chart-box {
    height: 5.5rem;
    width: 94%;
  }
}
</style>
